@charset "utf-8";
$fontSize:75;
html {
    font-size: $fontSize;
}

@function r($px) {
    @return $px/$fontSize+rem;
}

@mixin setPm($name, $val...) {
    //当参数不固定的时候使用...是固定写法从 $val...算数量
    $max: length($val); //4
    $str: '';
    @for $i from 1 through $max {
        $value: nth($val, $i)/$fontSize;
        $str:#{$str+$value}rem;
        @if $i <$max {
            $str:#{$str+" "};
        }
    }
    #{$name}:$str;
}

//@charset "utf-8";
//$fontSize:20;
//html {
//  font-size: $fontSize;
//}
//
//@function r($px) {
//  @return $px/2/$fontSize+rem;
//}
//
//@mixin setPm($name, $val...) {
//  //当参数不固定的时候使用...是固定写法从 $val...算数量
//  $max: length($val); //4
//  $str: '';
//  @for $i from 1 through $max {
//      $value: nth($val, $i)/2/$fontSize;
//      $str:#{$str+$value}rem;
//      @if $i <$max {
//          $str:#{$str+" "};
//      }
//  }
//  #{$name}:$str;
//}
* {
    margin: 0;
    padding: 0;
}

.ovw {
    overflow: hidden;
}

html,
body {
    height: 100%;
}

// 预加载
.preload_Shandow {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #0e0e0e;
    img {
        display: block;
        width: 100%;
    }
    p.preStar {
        position: absolute;
        width: r(615);
        height: r(377);
        left: r(50);
        top: r(78);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-name: breathe;
        -webkit-animation-duration: 2700ms;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
    }
    dl {
        width: r(314);
        height: r(380);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: r(-157);
        margin-top: r(-190);
        dt {
            width: r(313);
            height: r(312);
            margin: 0 auto;
        }
        dd {
            text-align: center;
            font-size: r(38);
            line-height: r(42);
            color: #eece7d;
        }
    }
}

.allAcontainer {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    top: 0;
    //  音乐
    .music {
        //       position: absolute;
        position: fixed;
        right: 0;
        top: r(8);
        width: r(48);
        height: r(48);
        z-index: 15;
        padding: r(40);
        border-radius: 50%;
        img {
            width: 100%;
        }
    }
    // 音乐图标旋转动画
    .audio-rotate {
        -webkit-animation: rotating 2.5s linear infinite;
        -moz-animation: rotating 2.5s linear infinite;
        -o-animation: rotating 2.5s linear infinite;
        animation: rotating 2.5s linear infinite
    }
    @-webkit-keyframes rotating {
        from {
            -webkit-transform: rotate(0)
        }
        to {
            -webkit-transform: rotate(360deg)
        }
    }
    @keyframes rotating {
        from {
            transform: rotate(0)
        }
        to {
            transform: rotate(360deg)
        }
    }
    @-webkit-keyframes breathe {
        0% {
            opacity: .4;
        }
        100% {
            opacity: 1;
        }
    }
    //   呼吸灯效果
    @keyframes breath {
        from {
            opacity: 0.1;
        }
        /* 动画开始时的不透明度 */
        50% {
            opacity: 1;
        }
        /* 动画50% 时的不透明度 */
        to {
            opacity: 0.1;
        }
        /* 动画结束时的不透明度 */
    }
    @-webkit-keyframes breath {
        from {
            opacity: 0.1;
        }
        /* 动画开始时的不透明度 */
        50% {
            opacity: 1;
        }
        /* 动画50% 时的不透明度 */
        to {
            opacity: 0.1;
        }
        /* 动画结束时的不透明度 */
    }
    //   logo
    .logo {
        position: fixed;
        width: r(106);
        height: r(40);
        left: r(44);
        top: r(52);
        z-index: 15;
        img {
            display: block;
            width: 100%;
        }
    }
    .page {
        width: 100%;
        height: 100%;
        //       position: fixed;
        //       display: none;
        transform: translateX(100%);
        div.btn {
            a {
                display: block;
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }
    }
    .page.active {
        transform: translateX(0);
    }
    .page.remove {
        transform: translateX(100%);
    }
    //   第一页 首页
    .pageOne {
        background: url(../img/pageoneBg.png) no-repeat top center;
        background-size: 100% 100%;
        position: fixed;
        img {
            display: block;
            width: 100%;
        }
        //       光束
        //       p.light {
        //           position: absolute;
        //           width: r(304);
        //           height: r(854);
        //           background: url(../img/one_light.png) no-repeat top center;
        //           background-size: cover;
        //           top: 0;
        //           right: 0;
        //       }
        p.oneStar {
            width: r(615);
            height: r(377);
            position: absolute;
            left: r(50);
            top: r(64);
            animation-name: breath;
            /* 动画名称 */
            animation-duration: 3s;
            /* 动画时长3秒 */
            animation-timing-function: ease-in-out;
            /* 动画速度曲线：以低速开始和结束 */
            animation-iteration-count: infinite;
        }
        .wrapper {
            position: absolute;
            width: 100%;
            height: r(1128);
            //           bottom: 0;
            top: r(208);
            .inner {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                p.oneText {
                    width: r(610);
                    height: r(102);
                    position: absolute;
                    left: 50%;
                    margin-left: r(-305);
                    //               top: r(208);
                    top: 0;
                }
                ul {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    z-index: 2;
                    li {
                        position: absolute;
                    }
                    li.one {
                        width: r(62);
                        height: r(290);
                        right: r(180);
                        top: r(86);
                    }
                    li.two {
                        width: r(13);
                        height: r(59);
                        left: r(276);
                        top: r(319);
                    }
                    li.three {
                        width: r(34);
                        height: r(150);
                        top: r(269);
                        left: r(110);
                    }
                    li.five,
                    li.four {
                        width: r(19);
                        height: r(86);
                    }
                    li.four {
                        top: r(590);
                        right: r(318);
                    }
                    li.five {
                        top: r(412);
                        right: r(57);
                    }
                    li.six {
                        width: r(11);
                        height: r(52);
                        top: r(509);
                        left: r(30);
                    }
                    li.seven {
                        width: r(43);
                        height: r(174);
                        top: r(526);
                        left: r(226);
                    }
                }
                //           地球
                .earth {
                    width: r(750);
                    height: r(952);
                    position: absolute;
                    left: 50%;
                    margin-left: r(-375);
                    background: url(../img/earth.png) no-repeat top center;
                    background-size: cover;
                    top: r(174);
                    z-index: 1;
                }
            }
            p.point {
                width: r(496);
                height: r(450);
                position: absolute;
                z-index: 2;
                top: r(270);
                left: r(188);
            }
            div.btn {
                width: r(526);
                height: r(216);
                position: absolute;
                left: 50%;
                margin-left: r(-263);
                bottom: r(20);
                z-index: 2;
            }
        }
        .wrapper.small {
            height: 100%;
            top: 0;
            .inner {
                p.oneText {
                    top: r(208);
                }
                p.point {
                    top: r(472);
                }
                ul {
                    li.one {
                        top: r(290);
                    }
                    li.two {
                        top: r(523);
                    }
                    li.three {
                        top: r(473);
                    }
                    li.four {
                        top: r(590);
                    }
                    li.five {
                        top: r(616);
                    }
                    li.six {
                        top: r(713);
                    }
                    li.seven {
                        top: r(730);
                    }
                }
                .earth {
                    top: r(382);
                }
                div.btn {
                    bottom: r(-14);
                }
            }
        }
    }
    //   第二页
    .pageTwo {
        background: url(../img/reportBg.png) no-repeat top center;
        background-size: 100% 100%;
        position: fixed;
        //       transition: transform 0.45s;
        img {
            display: block;
            width: 100%;
        }
        a.btn {
            display: block;
            width: r(354);
            height: r(94);
            position: absolute;
            left: 50%;
            margin-left: r(-177);
            bottom: r(140);
            cursor: pointer;
        }
        p.choose_Year {
            width: r(487);
            height: r(30);
            margin: 0 auto;
            margin-top: r(450);
        }
        p.star {
            width: r(615);
            height: r(377);
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: breathe;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            position: absolute;
            left: r(50);
            top: r(120);
        }
        .dateYear {
            width: r(450);
            margin: 0 auto;
            height: r(172);
            line-height: r(172);
            border-bottom: 2px solid rgba(255, 255, 255, 0.502);
            text-align: center;
            font-size: r(72);
            color: #fff;
            margin-top: r(50);
        }
        //       年份选择控件样式修改
        .ios-select-widget-box #iosSelectTitle {
            font-size: r(32);
            color: #dcbe74;
        }
        .ios-select-widget-box.olay {
            background-color: rgba(0, 0, 0, 0.502);
            z-index: 20;
        }
        .ios-select-widget-box header.iosselect-header {
            //           height: r(105) !important;
            //           line-height: r(92) !important;
            background: url(../img/two_dateBg.png) no-repeat bottom center;
            background-size: r(691) r(13);
            background-color: rgba(37, 37, 37, 0.902);
        }
        .ios-select-widget-box header.iosselect-header a {
            font-size: r(28);
        }
        .ios-select-widget-box header.iosselect-header a.sure {
            color: #dcbe74;
        }
        .ios-select-widget-box header.iosselect-header a.close {
            color: #9a9485;
        }
        .ios-select-widget-box ul li.side1 {
            font-size: r(36);
            color: #9a9485;
        }
        .ios-select-widget-box ul li.at {
            font-size: r(40);
            color: #dcbe74;
            //       	 background-color: rgba(230, 200, 121,0.102);
        }
        //       .ios-select-widget-box .cover-area1,
        .ios-select-widget-box .cover-area2 {
            display: none;
        }
        .ios-select-widget-box .cover-area1 {
            height: 36px;
            border-top: 0;
            background: rgba(230, 200, 121, 0.102);
        }
        .ios-select-widget-box ul li {
            font-size: r(28);
            color: #9a9485;
            opacity: 1;
            background-color: rgba(37, 37, 37, 0.902);
        }
    }
    //        第三页
    .pageThree {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        .swiper-container {
            width: 100%;
            height: 100%;
            .mapTittle {
                height: r(218);
                width: r(706);
                margin-left: r(20);
                z-index: 3;
            }
            .mapImg {
                position: absolute;
                top: 0;
                height: r(1334);
                width: r(750);
            }
            .mapImg.small {
                height: 100%;
            }
            .smallMap {
                position: absolute;
                display: block;
            }
            .threeAsia {
                width: r(643);
                height: r(411);
                left: r(52);
                top: r(260);
                z-index: 10;
            }
            .threeEurope {
                width: r(524);
                height: r(488);
                right: r(109);
                top: r(218);
                z-index: 10;
            }
            .threeMoose {
                width: r(571);
                height: r(448);
                left: r(70);
                top: r(247);
                z-index: 10;
            }
            .threeSouth {
                width: r(328);
                height: r(467);
                left: r(209);
                top: r(230);
                z-index: 10;
            }
            .threeOceania {
                width: r(637);
                height: r(445);
                left: r(54);
                top: r(256);
                z-index: 10;
            }
            .threeAfrica {
                width: r(516);
                height: r(443);
                left: r(113);
                top: r(250);
                z-index: 10;
            }
            .swiper-slide1 {
                .threeAsia.small {
                    width: r(520);
                    height: auto;
                    left: 50%;
                    top: r(180);
                    margin-left: r(-260);
                }
                .mapImg.small {
                    top: r(100);
                }
            }
            .swiper-slide2 {
                .threeEurope.small {
                    width: r(416);
                    height: auto;
                    left: 50%;
                    top: r(160);
                    margin-left: r(-208);
                }
                .mapImg.small {
                    top: r(100);
                }
            }
            .swiper-slide3 {
                .threeMoose.small {
                    width: r(500);
                    height: auto;
                    left: 50%;
                    top: r(160);
                    margin-left: r(-250);
                }
                .mapImg.small {
                    top: r(100);
                }
            }
            .swiper-slide4 {
                .threeSouth.small {
                    width: r(270);
                    height: auto;
                    left: 50%;
                    top: r(160);
                    margin-left: r(-135);
                }
                .mapImg.small {
                    top: r(100);
                }
            }
            .swiper-slide5 {
                .threeOceania.small {
                    width: r(580);
                    height: auto;
                    left: 50%;
                    top: r(140);
                    margin-left: r(-290);
                }
                .mapImg.small {
                    top: r(100);
                }
            }
            .swiper-slide6 {
                .threeAfrica.small {
                    width: r(450);
                    height: auto;
                    left: 50%;
                    top: r(160);
                    margin-left: r(-240);
                }
                .mapImg.small {
                    top: r(100);
                }
            }
            .mapStar {
                height: r(417);
                width: r(645);
                position: absolute;
                top: r(218);
                left: r(42);
                z-index: 10;
                -webkit-animation-timing-function: ease-in-out;
                -webkit-animation-name: breathe;
                -webkit-animation-duration: 1700ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
            }
            .mapBorder {
                width: r(750);
                height: r(553);
                position: absolute;
                bottom: r(0);
                z-index: 10;
                left: r(0);
            }
            .mapNext {
                width: r(388);
                height: r(77);
                position: absolute;
                bottom: r(25);
                left: r(180);
                z-index: 200;
            }
            .fiveBtn {
                position: relative;
                height: r(990);
                width: r(504);
                left: 50%;
                margin-left: r(-252);
                top: r(203);
                .mapBtn {
                    width: r(345);
                    height: r(93);
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    margin-left: r(-172.5);
                }
            }
            .fiveBtn.small {
                top: 50%;
                margin-top: r(-495);
            }
            img.box {
                position: absolute;
                width: r(710);
                height: r(470);
                left: 50%;
                margin-left: r(-355);
                bottom: 0;
            }
            .swiper-slide {
                width: 100%;
                height: 100%;
                background: black;
                .ani {
                    position: absolute;
                }
                .txt {
                    position: absolute;
                }
                div.down {
                    position: absolute;
                    z-index: 999;
                    bottom: 40px;
                    margin: 0 auto;
                    p {
                        text-align: center;
                        font-size: 14px;
                        color: #333;
                    }
                    .array {
                        //                   position: absolute;
                        //                   z-index: 999;
                        -webkit-animation: start 1.5s infinite ease-in-out;
                    }
                }
            }
        }
        a.btnThree {
            display: block;
            width: r(300);
            height: r(50);
            line-height: r(50);
            text-align: center;
            color: #333;
            font-size: r(30);
            margin: 0 auto;
            border: 1px solid pink;
            margin-top: r(200);
            cursor: pointer;
        }
        //       右侧快捷导航
        //       nav {
        //           position: fixed;
        //           width: r(100);
        //           height: r(480);
        //           right: r(50);
        //           top: 40%;
        //           margin-top: r(-300);
        //           z-index: 10;
        //           background: pink;
        //           display: block;
        //           img.line {
        //               display: block;
        //               height: r(30);
        //               width: r(2);
        //               position: relative;
        //               left: r(96);
        //           }
        //           div.country {
        //               width: r(200);
        //               div {
        //                   width: r(86);
        //                   text-align: right;
        //                   height: r(21);
        //                   line-height: r(21);
        //                   color: rgba(238, 206, 125, 0.4);
        //                   //opicity:0.6;
        //               }
        //               .selected {
        //                   color: rgb(238, 206, 125);
        //                   font-weight: bold;
        //               }
        //               img {
        //                   margin-right: r(20);
        //                   width: r(21);
        //                   height: r(21);
        //               }
        //           }
        //       }
        nav {
            width: r(108);
            position: fixed;
            top: r(200);
            right: r(22);
            z-index: 10;
            //          height: r(456);
            display: none;
            ul {
                width: r(101);
                li {
                    width: 100%;
                    overflow: hidden;
                    margin-top: r(10);
                    dl {
                        width: 100%;
                        overflow: hidden;
                        dt {
                            float: left;
                            font-size: r(22);
                            line-height: r(26);
                            color: rgba(238, 206, 125, .5);
                            text-align: right;
                            width: r(72);
                        }
                        dd {
                            float: right;
                            width: r(21);
                            height: r(21);
                            background: url(../img/threeSelecte.png) no-repeat top center;
                            background-size: cover;
                            margin-top: r(2.5);
                        }
                    }
                    p.line {
                        background-color: rgba(238, 206, 125, .502);
                        width: 1px;
                        height: r(30);
                        float: right;
                        margin-top: r(9);
                        margin-right: r(10);
                    }
                    //                   span {
                    //                       float: left;
                    //                       font-size: r(22);
                    //                       line-height: r(26);
                    //                       color: rgba(238, 206, 125, .5);
                    //                       text-align: right;
                    //                       width: r(72);
                    //                   }
                    //                   i {
                    //                       float: right;
                    //                       width: r(21);
                    //                       height: r(61);
                    //                       background: url(../img/threeSelecte2.png) no-repeat top center;
                    //                       background-size: cover;
                    //                   }
                }
                li.active {
                    dl {
                        dt {
                            color: rgba(238, 206, 125, 1);
                        }
                        dd {
                            background: url(../img/threeSelected.png) no-repeat top center;
                            background-size: cover;
                        }
                    }
                    //                   span {
                    //                       color: rgba(238, 206, 125, 1);
                    //                   }
                    //                   i {
                    //                       height: r(30);
                    //                   }
                }
            }
        }
        //      nav.small {
        //          height: r(370);
        //          img.line {
        //              height: r(15);
        //          }
        //      }
        nav.small {
            //      	top: r(150);
            //          height: r(370);
            //          img.line {
            //              height: r(15);
            //          }
            ul {
                li {
                    p.line {
                        height: r(15);
                    }
                }
            }
        }
        nav.xsmall {
            top: r(150);
        }
        .swiper-slide {
            div.map {
                height: r(400);
                //background: #ccc;
                .pointList {
                    span {
                        display: block;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        //background: yellow;
                        display: none;
                        text-align: center;
                        font-size: r(16);
                    }
                    span.active {
                        display: block;
                    }
                }
            }
            ul.list {
                width: r(630);
                height: r(420);
                position: absolute;
                bottom: r(95);
                z-index: 200;
                //               left: r(50);
                left: 50%;
                margin-left: r(-315);
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                li {
                    float: left;
                    box-sizing: border-box;
                    height: r(60);
                    width: r(150);
                    line-height: r(60);
                    text-align: center;
                    font-size: r(28);
                    color: rgb(206, 187, 148);
                    //                   border: 0px solid pink;
                    border-left: 0;
                    border-top: 0;
                    background-color: #2f281f;
                    //rgb(206, 187, 148)
                    border-radius: 5px;
                    //margin-right:5px;
                    margin-bottom: r(10);
                    margin-right: r(10);
                    z-index: 1000;
                    //                   color: pink;
                }
                li:nth-of-type(4n) {
                    margin-right: 0;
                }
                li.mapSelected {
                    background: rgb(206, 187, 148);
                    color: #2f281f;
                }
            }
        }
    }
    //   第四页
    .pageFour {
        background: url(../img/reportBg.png) no-repeat center;
        background-size: 100% 100%;
        img {
            display: block;
            width: 100%;
        }
        .wrapper {
            position: relative;
            top: 0;
            width: 100%;
            height: 100%;
            .inner {
                position: absolute;
                height: r(990);
                width: r(504);
                left: 50%;
                margin-left: r(-252);
                top: r(203);
                p.report_Text {
                    margin: 0 auto r(224);
                    //margin: 0 auto;
                    width: r(504);
                    height: r(180);
                }
                p.report_Name {
                    margin: 0 auto;
                    width: r(222);
                    height: r(30);
                }
                a.btn {
                    display: block;
                    width: r(345);
                    height: r(94);
                    margin: 0 auto;
                    margin-top: r(246);
                    //                   position: absolute;
                    //                   left: 50%;
                    //                   margin-left: r(-172.5);
                    //                   bottom: r(140);
                    cursor: pointer;
                    transition: transform 0.6s ease-out;
                    //           transition: all 0.6s ease-out;
                }
                a.btn.click {
                    transition: all 0.6s ease-out;
                    transform: translate(1px, 1px);
                }
                form {
                    border-bottom: 2px solid rgba(255, 255, 255, 0.502);
                    width: r(450);
                    margin: 0 auto;
                    margin-top: r(43);
                    input {
                        width: 100%;
                        font-size: r(48);
                        line-height: r(76);
                        border: none;
                        color: #fff;
                        text-align: center;
                        background: none;
                        padding: r(43) r(5);
                        box-sizing: border-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        cursor: pointer;
                    }
                    input::-webkit-input-placeholder {
                        color: rgba(255, 255, 255, .5);
                    }
                    input:-moz-placeholder {
                        color: rgba(255, 255, 255, .5);
                    }
                    input:-ms-input-placeholder {
                        color: rgba(255, 255, 255, .5);
                    }
                }
            }
            .inner.small {
                top: 50%;
                margin-top: r(-495);
            }
        }
    }
    //   第五页
    .pageFive {
        position: fixed;
        top: 0;
        background-color: #131313;
        img {
            display: block;
            width: 100%;
        }
        //       星星
        p.fiveStar {
            width: r(674);
            height: r(377);
            position: absolute;
            left: r(45);
            top: r(20);
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: breathe;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            z-index: 2;
        }
        div.detailText {
            margin-top: r(140);
            p {
                text-align: center;
                height: r(42);
                margin: 0 auto;
                b {
                    display: inline-block;
                    font-weight: normal;
                }
                i {
                    //                   font-size: r(34);
                    font-size: r(31);
                    color: #fff;
                    float: left;
                    margin: 0 r(4);
                    line-height: r(42);
                    font-style: normal;
                }
                span {
                    float: left;
                    //                   font-size: r(42);
                    font-size: r(40);
                    color: #eece7d;
                    line-height: r(42);
                    text-align: center;
                }
            }
            p:nth-of-type(1) {
                //               width: r(596);
                b {
                    display: inline-block;
                    font-weight: normal;
                }
            }
            p:nth-of-type(2) {
                //               width: r(418);
                margin: r(12) auto;
            }
            p:nth-of-type(3) {
                //               width: r(172);
            }
        }
        div.totalMap {
            //       	width: 100%;
            position: relative;
            height: r(1049);
            background: url(../img/five_total_earth.png) no-repeat top center;
            background-size: cover;
            //           background-color: pink;
            top: r(-20);
            .btnList {
                width: r(708);
                height: r(362);
                position: absolute;
                left: 50%;
                margin-left: r(-354);
                bottom: r(25);
                .inner {
                    width: r(708);
                    height: r(306);
                    background: url(../img/five_boxBg.png) no-repeat top center;
                    background-size: cover;
                }
                p.text {
                    width: r(506);
                    height: r(122);
                    margin: r(54) auto 0;
                }
                p.btnClick {
                    //                   display: none;
                    width: r(510);
                    padding: 0 r(60);
                    margin: 0 auto;
                    margin-top: r(35);
                    a {
                        display: block;
                        width: r(245);
                        height: r(68);
                        float: left;
                    }
                    a.save {
                        margin-left: r(20);
                    }
                }
                p.bottomLogo {
                    width: r(134);
                    height: r(40);
                    margin: 0 auto;
                    margin-top: r(16);
                }
                //               分享
                dl {
                    display: none;
                    width: r(206);
                    margin: 0 auto;
                    img {
                        display: block;
                        width: 100%;
                    }
                    dt {
                        margin: 0 auto;
                        width: r(72);
                        height: r(72);
                        margin: r(20) auto r(10);
                    }
                    dd {
                        width: r(199);
                        height: r(19);
                    }
                }
            }
            .totalEarth {
                position: absolute;
                width: 100%;
                height: r(501);
                background: url(../img/five_total_map.png) no-repeat top left r(20);
                background-size: r(709) r(501);
                left: 0;
                top: r(127);
                .earthInner {
                    position: relative;
                    top: 0;
                    width: 100%;
                    height: r(501);
                    //                   background: pink;
                    div.pointList {
                        span {
                            width: r(42);
                            height: r(42);
                            background: url(../img/five_point.png) no-repeat center;
                            background-size: cover;
                            position: absolute;
                            display: none;
                        }
                        span.active {
                            display: block;
                        }
                        //                   	亚洲
                        .country0 {
                            right: r(144);
                            top: r(170);
                        }
                        .country1 {
                            right: r(176);
                            top: r(130);
                        }
                        .country2 {
                            right: r(105);
                            top: r(144);
                        }
                        .country3 {
                            right: r(99);
                            top: r(156);
                        }
                        .country4 {
                            right: r(75);
                            top: r(160);
                        }
                        .country5 {
                            right: r(109);
                            top: r(242);
                        }
                        .country6 {
                            right: r(120);
                            top: r(238);
                        }
                        .country7 {
                            right: r(134);
                            top: r(234);
                        }
                        .country8 {
                            right: r(138);
                            top: r(224);
                        }
                        .country9 {
                            right: r(158);
                            top: r(210);
                        }
                        .country10 {
                            right: r(150);
                            top: r(220);
                        }
                        .country11 {
                            right: r(139);
                            top: r(270);
                        }
                        .country12 {
                            right: r(130);
                            top: r(254);
                        }
                        .country13 {
                            right: r(125);
                            top: r(290);
                        }
                        .country14 {
                            right: r(112);
                            top: r(274);
                        }
                        .country15 {
                            right: r(205);
                            top: r(165);
                        }
                        .country16 {
                            right: r(190);
                            top: r(170);
                        }
                        .country17 {
                            right: r(196);
                            top: r(198);
                        }
                        .country18 {
                            right: r(222);
                            top: r(170);
                        }
                        .country19 {
                            right: r(185);
                            top: r(241);
                        }
                        .country20 {
                            right: r(196);
                            top: r(250);
                        }
                        .country21 {
                            right: r(224);
                            top: r(131);
                        }
                        .country22 {
                            right: r(216);
                            top: r(141);
                        }
                        .country23 {
                            right: r(232);
                            top: r(142);
                        }
                        .country24 {
                            right: r(240);
                            top: r(134);
                        }
                        .country25 {
                            right: r(249);
                            top: r(151);
                        }
                        .country26 {
                            right: r(253);
                            top: r(142);
                        }
                        .country27 {
                            right: r(266);
                            top: r(145);
                        }
                        .country28 {
                            right: r(265);
                            top: r(137);
                        }
                        .country29 {
                            right: r(274);
                            top: r(140);
                        }
                        .country30 {
                            right: r(290);
                            top: r(128);
                        }
                        // 欧洲
                        .country31 {
                            right: r(315);
                            top: r(47);
                        }
                        .country32 {
                            right: r(339);
                            top: r(57);
                        }
                        .country33 {
                            right: r(355);
                            top: r(57);
                        }
                        .country34 {
                            right: r(403);
                            top: r(48);
                        }
                        .country35 {
                            right: r(354);
                            top: r(77);
                        }
                        .country36 {
                            right: r(194);
                            top: r(68);
                        }
                        .country37 {
                            right: r(318);
                            top: r(106);
                        }
                        .country38 {
                            right: r(332);
                            top: r(92);
                        }
                        .country39 {
                            right: r(316);
                            top: r(102);
                        }
                        .country40 {
                            right: r(332);
                            top: r(107);
                        }
                        .country41 {
                            right: r(328);
                            top: r(101);
                        }
                        .country42 {
                            right: r(347);
                            top: r(91);
                        }
                        .country43 {
                            right: r(342);
                            top: r(97);
                        }
                        .country44 {
                            right: r(338);
                            top: r(103);
                        }
                        .country45 {
                            right: r(373);
                            top: r(85);
                        }
                        .country46 {
                            right: r(389);
                            top: r(85);
                        }
                        .country47 {
                            right: r(362);
                            top: r(89);
                        }
                        .country48 {
                            right: r(360);
                            top: r(94);
                        }
                        .country49 {
                            right: r(358);
                            top: r(94);
                        }
                        .country50 {
                            right: r(364);
                            top: r(113);
                        }
                        .country51 {
                            right: r(359);
                            top: r(123);
                        }
                        .country52 {
                            right: r(309);
                            top: r(113);
                        }
                        .country53 {
                            right: r(313);
                            top: r(113);
                        }
                        .country54 {
                            right: r(317);
                            top: r(115);
                        }
                        .country55 {
                            right: r(327);
                            top: r(118);
                        }
                        .country56 {
                            right: r(322);
                            top: r(134);
                        }
                        .country57 {
                            right: r(333);
                            top: r(112);
                        }
                        .country58 {
                            right: r(328);
                            top: r(112);
                        }
                        .country59 {
                            right: r(336);
                            top: r(126);
                        }
                        .country60 {
                            right: r(379);
                            top: r(127);
                        }
                        .country61 {
                            right: r(386);
                            top: r(135);
                        }
                        //                       北美洲
                        .country62 {
                            left: r(127);
                            top: r(103);
                        }
                        .country63 {
                            left: r(133);
                            top: r(146);
                        }
                        .country64 {
                            left: r(117);
                            top: r(208);
                        }
                        .country65 {
                            left: r(245);
                            top: r(9);
                        }
                        .country66 {
                            left: r(146);
                            top: r(232);
                        }
                        .country67 {
                            left: r(156);
                            top: r(229);
                        }
                        .country68 {
                            left: r(151);
                            top: r(243);
                        }
                        .country69 {
                            left: r(153);
                            top: r(237);
                        }
                        .country70 {
                            left: r(150);
                            top: r(237);
                        }
                        .country71 {
                            left: r(154);
                            top: r(244);
                        }
                        .country72 {
                            left: r(156);
                            top: r(247);
                        }
                        .country73 {
                            left: r(192);
                            top: r(206);
                        }
                        .country74 {
                            left: r(175);
                            top: r(211);
                        }
                        .country75 {
                            left: r(176);
                            top: r(221);
                        }
                        .country76 {
                            left: r(184);
                            top: r(215);
                        }
                        .country77 {
                            left: r(206);
                            top: r(243);
                        }
                        .country78 {
                            left: r(198);
                            top: r(217);
                        }
                        .country79 {
                            left: r(201);
                            top: r(220);
                        }
                        .country80 {
                            left: r(203);
                            top: r(225);
                        }
                        //                       南美洲
                        .country81 {
                            left: r(182);
                            top: r(270);
                        }
                        .country82 {
                            left: r(195);
                            top: r(253);
                        }
                        .country83 {
                            left: r(220);
                            top: r(265);
                        }
                        .country84 {
                            left: r(163);
                            top: r(279);
                        }
                        .country85 {
                            left: r(165);
                            bottom: r(145);
                        }
                        .country86 {
                            left: r(197);
                            bottom: r(137);
                        }
                        .country87 {
                            left: r(218);
                            bottom: r(161);
                        }
                        .country88 {
                            left: r(183);
                            bottom: r(89);
                        }
                        .country89 {
                            left: r(199);
                            bottom: r(58);
                        }
                        .country90 {
                            left: r(219);
                            bottom: r(69);
                        }
                        .country91 {
                            left: r(211);
                            bottom: r(83);
                        }
                        //                       北美洲
                        .country92 {
                            right: r(71);
                            bottom: r(133);
                        }
                        .country93 {
                            right: r(12);
                            bottom: r(75);
                        }
                        .country94 {
                            right: r(81);
                            bottom: r(237);
                        }
                        .country95 {
                            right: r(70);
                            bottom: r(244);
                        }
                        .country96 {
                            right: r(47);
                            bottom: r(194);
                        }
                        .country97 {
                            right: r(29);
                            bottom: r(185);
                        }
                        .country98 {
                            right: r(16);
                            bottom: r(185);
                        }
                        .country99 {
                            right: r(23);
                            bottom: r(179);
                        }
                        .country100 {
                            right: r(14);
                            bottom: r(202);
                        }
                        .country101 {
                            right: r(13);
                            bottom: r(214);
                        }
                        .country102 {
                            right: r(11);
                            bottom: r(207);
                        }
                        //                         非洲
                        .country103 {
                            right: r(302);
                            bottom: r(297);
                        }
                        .country104 {
                            right: r(331);
                            bottom: r(293);
                        }
                        .country105 {
                            right: r(345);
                            bottom: r(321);
                        }
                        .country106 {
                            right: r(382);
                            bottom: r(309);
                        }
                        .country107 {
                            right: r(294);
                            bottom: r(264);
                        }
                        .country108 {
                            right: r(265);
                            bottom: r(223);
                        }
                        .country109 {
                            right: r(278);
                            bottom: r(191);
                        }
                        .country110 {
                            right: r(281);
                            bottom: r(156);
                        }
                        .country111 {
                            left: r(309);
                            bottom: r(246);
                        }
                        .country112 {
                            left: r(308);
                            bottom: r(239);
                        }
                        .country113 {
                            left: r(319);
                            bottom: r(230);
                        }
                        .country114 {
                            left: r(319);
                            bottom: r(221);
                        }
                        .country115 {
                            left: r(328);
                            bottom: r(217);
                        }
                        .country116 {
                            left: r(335);
                            bottom: r(223);
                        }
                        .country117 {
                            left: r(360);
                            bottom: r(221);
                        }
                        .country118 {
                            left: r(409);
                            bottom: r(143);
                        }
                        .country119 {
                            left: r(387);
                            bottom: r(148);
                        }
                        .country120 {
                            right: r(261);
                            bottom: r(123);
                        }
                        .country121 {
                            right: r(230);
                            bottom: r(130);
                        }
                    }
                }
            }
        }
        //       保存遮罩
        img.saveShandow {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 40;
            //          display: none;
        }
        .savebtn {
            display: block;
            width: r(245);
            z-index: 20;
            height: r(68);
            //                      background: pink;
            //           left: 50%;
            //           margin-left: r(-253);
            left: r(122);
            position: absolute;
            z-index: 41;
            a {
                width: r(245);
                height: r(68);
                float: left;
                background: none;
                opacity: 0;
            }
        }
        div.hidden {
            height: r(188);
            display: none;
        }
    }
    .pageFive.small {
        div.detailText {
            position: absolute;
            z-index: 2;
            margin-top: 0;
            width: r(596);
            left: 50%;
            margin-left: r(-298);
            top: r(24);
        }
    }
}

@media (max-width: 321px) {
    .allAcontainer {
        .pageFive {
            div.detailText {
                p:nth-of-type(1) {
                    width: r(610);
                }
            }
        }
    }
}

.allAcontainer.phone7 {
    .pageOne {
        .wrapper {
            div.btn {
                bottom: 1.3rem;
            }
        }
    }
    .pageThree {
        .swiper-container {
            .mapImg {
                height: 100%;
            }
            .fiveBtn {
                .mapBtn {
                    bottom: 0.8rem;
                }
            }
        }
    }
    .pageFive {
        div.detailText {
            margin-top: 1.26667rem;
        }
        div.totalMap {
            top: -0.82rem;
        }
    }
    //  }
}

.preload_Shandow.hide{
	display: none !important;
}
//pc弹框
.pc_Shandow {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    p {
        text-align: center;
        font-size: 14px;
        color: #fff;
    }
    dl {
        width: 300px;
        height: 314px;
        position: absolute;
        top: 50%;
        margin-left: -150px;
        left: 50%;
        margin-top: -157px;
        dt {
            width: 224px;
            height: 224px;
            margin: 0 auto;
            img {
                display: block;
                width: 100%;
                margin: 0 auto;
            }
        }
        dd {
            text-align: center;
            font-size: 20px;
            line-height: 30px;
            color: #fff;
            margin-top: 30px;
        }
    }
}